<template>
  <Teleport :to="$attrs.getContainer || 'body'">
    <div class="be-modal" :class="[{ 'be-modal--fullscreen': isFullscreen }, $attrs.class]" ref="beModelRef">
      <a-modal v-bind="getBindValue" v-model:open="visible" :getContainer="beModelRef">
        <!-- 关闭按钮 -->
        <template #closeIcon>
          <slot name="closeIcon" v-if="showHeader">
            <div class="operate-btns" @click.stop>
              <template v-if="true">
                <a-tooltip v-if="isFullscreen">
                  <template #title>还原</template>
                  <BeIcon class="tool-btn minimize-btn" icon="local:minimize" @click.stop="toggleFullScreen" />
                </a-tooltip>
                <a-tooltip v-else>
                  <template #title>最大化</template>
                  <BeIcon class="tool-btn maximize-btn" icon="local:maximize" @click.stop="toggleFullScreen" />
                </a-tooltip>
              </template>
              <a-tooltip>
                <template #title>关闭</template>
                <BeIcon class="tool-btn close-btn" icon="local:close-fork" @click.stop="handleClose" />
              </a-tooltip>
            </div>
          </slot>
        </template>
        <!-- 标题 -->
        <template #title>
          <slot name="title">
            <div class="be-modal__title">{{ $attrs.title }}</div>
          </slot>
        </template>
        <!-- 默认内容 -->
        <slot></slot>
        <!-- 底部 -->
        <template #footer>
          <slot name="footer" v-if="showFooter">
            <div class="be-dialog__footer">
              <BeButton @click="handleCancel()">{{ cancelText }}</BeButton>
              <BeButton type="primary" @click="handleOk()">{{ confirmText }}</BeButton>
            </div>
          </slot>
        </template>
      </a-modal>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

// Props 类型定义
interface Props {
  open?: boolean // 是否打开
  showHeader?: boolean // 是否显示头部
  showFooter?: boolean // 是否显示底部
  fullscreen?: boolean // 是否允许全屏切换
  confirmText?: string // 确认按钮文本
  cancelText?: string // 取消按钮文本
  customClose?: boolean //是否自定义关闭
}

// 默认参数设置
defineOptions({ name: 'BeModal', inheritAttrs: false })

// props
const props = withDefaults(defineProps<Props>(), {
  open: false,
  showHeader: true,
  showFooter: true,
  fullscreen: false,
  confirmText: '确定',
  cancelText: '取消',
  customClose: false
})

// emit
const emit = defineEmits(['update:open', 'cancel', 'ok'])

// state
const attrs = useAttrs()
const beModelRef = ref()
const visible = ref(props.open)
const isFullscreen = ref(false)
// const { initDrag } = useDrag({ fullscreen: isFullscreen, modalRef: beModelRef })
const getBindValue = computed(() => {
  const { title: _title, class: _class, getContainer: _getContainer, ...rest } = attrs
  return rest
})

/**
 * 切换全屏模式
 */
const toggleFullScreen = () => {
  isFullscreen.value = !isFullscreen.value
}

/**
 * 外部控制打开
 */
const handleOpen = () => {
  visible.value = true
}

/**
 * 外部控制关闭
 */
const handleClose = () => {
  visible.value = false
  isFullscreen.value = false
  emit('cancel')
}

/**
 * 处理取消按钮点击
 */
const handleCancel = () => {
  emit('cancel')
  handleClose()
}

/**
 * 处理确定按钮点击
 */
const handleOk = () => {
  emit('ok')
  console.log('handleOk', props.customClose)
  if (!props.customClose) handleClose()
}

watch(
  () => visible.value,
  (val) => {
    if (val) {
      // initDrag()
    }
    emit('update:open', val)
  }
)

watch(
  () => props.open,
  (val) => {
    visible.value = val
  }
)

// 对外暴露方法
defineExpose({ open: handleOpen, close: handleClose })
</script>

<style lang="scss">
.be-modal {
  .ant-modal {
    padding: 0;
    overflow: hidden;
  }
  &--fullscreen.be-modal {
    overflow: hidden;
    .ant-modal {
      inset: 0 !important;
      width: 100% !important;
      max-width: 100%;
      height: 100%;
      &-content {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      // 全屏自动高度
      .ant-modal-body {
        max-height: calc(100vh - 121px);
        overflow-y: auto;
      }
    }
    .ant-modal-footer {
      margin-top: 0;
    }
  }
  // 全屏自动高度
  .ant-modal-body {
    height: 100%;
    max-height: calc(100vh - 321px);
    padding: 16px;
    overflow-y: auto;
  }
  .ant-modal-close {
    top: 8px;
    right: 0;
    width: auto;
    height: auto;
    &:hover {
      color: var(--foreground);
      background-color: transparent;
    }
    .ant-modal-close-x {
      display: block;
      line-height: normal;
      cursor: default;
    }
    .operate-btns {
      display: flex;
      align-items: center;
      padding: 0 10px;
      .tool-btn {
        box-sizing: content-box;
        padding: 8px;
        font-size: 20px;
        color: var(--foreground);
        cursor: pointer;
        &:hover {
          color: var(--primary);
        }
        &.close-btn:hover {
          color: var(--error);
        }
      }
    }
  }
  .ant-modal-content {
    padding: 0;
    overflow: hidden;
  }
  .ant-modal-header {
    margin-bottom: 0;
    border-bottom: 1px solid var(--border);
    .be-modal__title {
      padding: 16px;
      // text-align: center;
    }
  }
  .ant-modal-footer {
    margin: 0;
    .be-dialog__footer {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      padding: 16px;
      border-top: 1px solid var(--border);
    }
  }
}
</style>
